<template>
	<div>
		<div class="order-detail" v-show="!loading">
			<van-row class="pay_time">
				<van-col span="12" class="pay_time_title">
					<van-icon style="color: #FFFFFF;" name="clock" v-if="orderInfo.orderStatus == 'waitingPay'" />{{ orderInfo.orderStatusName }}
				</van-col>
				<van-col span="12" class="pay_time_main" v-if="orderInfo.orderStatus == 'waitingPay'">
					<div class="">剩余：{{ showFormatTime }}</div>
					<div class="pay_time_price">需付款：&yen;{{ orderInfo.orderAmount | formatPrice }}</div>
				</van-col>
			</van-row>
			<van-row class="pay_time_box">
				<van-cell-group>
					<van-cell :title="'收货人:' + receiverInfo.receiverName" :value="receiverInfo.receiverMobile" :border="false" class="Contacts" />
					<van-cell :value="'收货地址：' + receiverInfo.receiverAddress" border icon="location" style="padding-top: 0;" />
				</van-cell-group>
			</van-row>
			<van-row :class="goodsList.length > 2 ? 'order-goods' : '' ">
				<list-item v-for="item in goodsList" :key="item.id" :name="item.id" :imgArea="[90,90]" :imgUrl="item.goodsCoverImg" :title="item.goodsName" :desc="item.goodsTitle
" :price="item.goodsPrice | formatPrice" :number="item.goodsQuantity" />
				<div class="more_all" v-if="goodsList.length > 2" @click="viewMore">查看全部</div>
			</van-row>
			
			<van-row class="order_info">
				<van-row>
					<div class="">订单编号：{{ orderInfo.orderSn }}
					<van-button size="mini" v-clipboard:copy="orderInfo.orderSn"
						v-clipboard:success="onCopyClipboardSuccess"
						v-clipboard:error="onCopyClipboardError">复制</van-button>
					</div>
				</van-row>
				<van-row><div class="">下单时间：{{ orderInfo.orderTime }}</div></van-row>
				<van-row v-if='dispatchInfo.is_shipment'><div class="">配送方式：{{ dispatchInfo.express_name }}</div></van-row>
			</van-row>
			<van-row class="total">
				<van-panel title="商品合计" :status="orderInfo.goodsAmount | formatPrice | padPrefix('¥')"  class="total_panel"></van-panel>
				<van-panel title="运费" :status="dispatchInfo.expressFee | formatPrice | padPrefix('+¥')" class="total_pane2"></van-panel>
			</van-row>
			<van-row class="pending_pay" v-if="orderInfo.orderStatus == 'waitingPay'">
				待付款：<span class="pending_pay_price">&yen;{{ orderInfo.goodsAmount | formatPrice }}</span>
			</van-row>
			<van-row class="pay_btn" v-if="orderInfo.orderStatus == 'waitingPay'">
				<van-button size="small cancelOrder-btn" v-if="orderInfo.orderStatus == 'waitingPay'" @click="handleCloseOrder">取消订单</van-button>
				<van-button size="small" v-if="orderInfo.orderStatus == 'waitingPay'" @click="handleShowPay">付款</van-button>
			</van-row>
		</div>
		<van-toast :mask="true" message="加载中..." type="loading" v-model="loading"></van-toast>
		
		<PayItem 
			:payShow = "orderPayShowModel"
			:total = "orderInfo.orderTotalFee"
			@pay = "handleOrderPaySubmit"
			@getRadio = "changeOrderPayType"
			@hidePay = "handleHidePay"
		/>
	</div>
</template>

<script>
import { mapGetters, mapActions, mapState } from 'vuex'
import PayItem from '@/components/pay-item'
import ListItem from '@/components/list-item'
import { getOrderInfo , cancelOrder } from '@/api/order/index.js'
import { payOrder , getOrderID } from '@/api/pay/index'
export default {
    name: 'orderDetail',
    components: {
        ListItem,
        PayItem
    },
    data () {
        return {
			orderId: 0,
			loading: false,
            type: 1,
            page: 1,
            orderInfo: {
				orderAmount: 0.00,
				goodsAmount: 0.00,
				payExpiredTime: 0,
			},
            receiverInfo: {
				receiverName: '',
				receiverMobile: '',
				receiverAddress: '',
			},
            dispatchInfo: {
				expressFee: 0.00,
			},
			memberInfo: {
				mobile: '',
				wallet: 0.00,
			},
            goodsList: [],
			showFormatTime: '00小时00分钟00秒',
			orderPayShowModel: false,
			orderPayType: 1,
			orderPayTypeWallet: 2,
			
        }
	},
	computed: {
		...mapGetters(['contactMobile', 'walletBalance', 'orderPayTypeDefault', 'orderPayTypeList']),
	},
	methods: {
		...mapActions(['getMemberInfo']),
        getData (callback) {
        	this.orderPayShowModel = false
            this.loading = true
            getOrderInfo(this.orderId).then((res) => {
                this.loading = false
                this.orderInfo = res.data.orderInfo
                this.receiverInfo = res.data.receiverInfo
                this.dispatchInfo = res.data.dispatchInfo
               
                this.goodsList = res.data.goodsList
                
				this.memberInfo = res.data.memberInfo
                if (this.orderInfo.payExpiredTime && callback) {
	                callback()
                }
            }).catch((res) => {
                this.loading = false
                this.orderData = {}
            })
        },
        countDown () {
			function normalize(num) {
				num = num <= 0 ? 0 : num
				return num < 9 ? '0' + num : num
			}
			const payExpiredTime = this.orderInfo.payExpiredTime
			const nowTime = Date.parse(new Date()) / 1000
			let payExpiredTimeLeft = payExpiredTime - nowTime
			
			function showFormatTime() {
				const nowTime = Date.parse(new Date()) / 1000
				payExpiredTimeLeft = payExpiredTime - nowTime
				let day = parseInt(payExpiredTimeLeft / 60 / 60 / 24)
				let hour = normalize(parseInt(payExpiredTimeLeft / 60 / 60 % 24))
				let minute = normalize(parseInt(payExpiredTimeLeft / 60 % 60))
				let second = normalize(parseInt(payExpiredTimeLeft % 60))
				return hour + '小时' + minute + '分钟' + second + '秒'
			}
			let timer = null
			if (payExpiredTimeLeft > 0) {
				timer = setInterval(() => {
					this.showFormatTime = showFormatTime()
				}, 1000)
			} else {
				clearInterval(timer)
		        this.getData()
			}
        },
        onCopyClipboardSuccess (e) {
			this.$toast('你已复制订单号')
	    },
	    onCopyClipboardError (e) {
			this.$toast('复制订单号失败')
	    },
	    handleShowPay () {
			this.orderPayShowModel = true
		},
	    handleHidePay () {
			this.orderPayShowModel = false
		},
	    handleOrderPaySubmit () {
			if (this.orderPayType == this.orderPayTypeWallet) {
				this.$router.push({ name: 'orderMemberValidate', query: { id: this.orderId } })
			} else {
				payOrder(this.orderPayType, this.orderId).then((res) => {
					if (res.status == 1) {
						this.$toast(res.message)
					}
					if ( res.data.ali_link != '') {
						window.location.href = res.data.ali_link;
					}
				}).catch(() => {
					
        		})
			}
		},
		handleCloseOrder () {
			this.$dialog.confirm({
				message: '确认要取消订单吗？',
			}).then(() => {
			  // on confirm
				cancelOrder(this.$route.query.id).then((res) => {
					if (res.status == 0) {
						this.$toast('取消订单成功')
					} else {
						this.$toast(res.message ? res.message : '取消订单失败')
					}
					this.getData ()
				}).catch(() => {
					this.$toast('取消订单失败')
				})
			}).catch(() => {
				
			})
		},
		changeOrderPayType (orderPayType) {
			this.orderPayType = orderPayType+1
		},
		viewMore(event) {
			if(document.querySelectorAll('.order-goods')[0].classList.contains('order-goods-active')){
				event.target.innerText = '查看全部'
				document.querySelectorAll('.order-goods')[0].classList.remove('order-goods-active')
			}else{
				event.target.innerText = '收起'
				document.querySelectorAll('.order-goods')[0].classList.add('order-goods-active')
			}
			
		}
    },
    created () {
//      this.getData()
    },
    activated () {
		this.orderId = this.$route.query.id
    	this.getMemberInfo()
		this.getData(() => {
			this.countDown()
		})
	},
}
</script>

<style lang="scss">
@import "../../styles/color.scss";
.order-detail {
    padding-top: 46px;
    .van-cell-group{
    	margin:0 auto;
    	border-radius: 10px;
    }
    .has-tabbar{
    	padding-bottom: 0;
    }
    
    .row{
    	border-bottom: 1px solid #EAEAEA;
    }
    .pay_time{
    	min-height: 105px;
    	color: #FFFFFF;
    	background: url(~assets/img/order/top-bg.jpg) no-repeat center center;
    	background-size: cover;
    	padding:15px;
    	padding-bottom:0;
    	.pay_time_title{
    		padding-left:15px;
    		text-align: left;
    		font-size:0.32rem;
    		line-height:24px;
    		width: 40%;
    		.van-icon-clock{
    			vertical-align: middle;
    			margin-right: 10px;
    		}
    	}
    	.pay_time_main{
    		padding-right: 15px;
    		text-align: right;
    		font-size: 0.28rem;
    		width: 60%;
    		.pay_time_price{
    			font-size: 0.24rem;
    			line-height: 18px;
    		}
    	}
    }
    .pay_time_box{
    	background-color: #fff;
    	min-height: 65px;
    	position: relative;
    	margin-bottom: 10px;
    	.van-cell-group{
	    	box-shadow: 0px 2px 10px 0px #EAEAEA;
    		position: absolute;
    		bottom: 18px;
    		left: 4%;
    		width: 92%;
    	}
    	.van-cell__title{
    		flex: 3;
    	}
    	.van-cell__value{
    		flex: 2;
    	}
    	.van-hairline--top-bottom::after{
    		border: none;
    		
    	}
    }
    .more_all{
    	/*border-top:1px solid #EAEAEA ;*/
    	width: 100%;
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	background-color: #FFFFFF;
    	line-height: 38px;
    	color: $ashColor;
    }
    .total{
		.van-hairline--top-bottom::after,.van-cell:not(:last-child)::after{
			border: none;
		}
		.total_panel{
			font-size: 0.28rem;
			margin: 0;
			.van-cell{
				padding-bottom: 0;
				.van-cell__value{
					color: $titleColor;
					font-weight: 700;
				}
			}
		}
		.total_pane2{
			font-size: 0.28rem;
			margin: 0;
			.van-cell{
				padding-top: 0;
				/*margin:0 15px;*/
				.van-cell__value{
					color: $titleColor;
					font-weight: 700;
				}
			}
		}
		
	}
	.order_info{
		text-align: left;
		background-color: #FFFFFF;
		line-height: 24px;
		padding: 15px;
		font-size: 0.28rem;
		margin-bottom: 10px;
		margin-top: 10px;
		.van-button--mini{
			border-radius: 10px;
			line-height: 22px;
			margin-left: 10px;
		}
		
	}
	.pay_btn{
		text-align: right;
		background-color: #FFFFFF;
		border-top: 1px solid #EAEAEA;
		padding: 10px 0;
		padding-right: 15px;
		.van-button--small{
			min-width: 76px;
			height: 28px;
			line-height: 28px;
			border-radius: 20px;
			border-color: $checkBoxColor;
			color: $checkBoxColor;
		}
		.cancelOrder-btn{
			border-color: $titleColor;
			color: $titleColor;
		}
	}
	.pending_pay{
		background-color: #FFFFFF;
		text-align: right;
		font-size: 0.32rem;
		font-weight: 700;
		padding: 10px 15px;
		border-top: 1px solid #EAEAEA;
		.pending_pay_price{
			color: $checkBoxColor;
		}
	}
	.order-goods{
		height: 260px;
		overflow: hidden;
		position: relative;
	}
	.order-goods-active{
		height: auto;
		padding-bottom: 38px;
	}
}
</style>
